<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>找回密码</title>
	<link rel="stylesheet" type="text/css" href="__CSS__api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
	<style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 45px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 20px 20px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        body{
            background-color: #FFFFFF;
        }
        .warrp{
            width: 100%;
            height: 100%;
            padding: 1.4rem 1.5rem 0 1.5rem;
        }
        .title{
            width: 100%;
            height: 3.5rem;
            font-size:1.15rem;
            color: #333333;
            line-height:1.15rem;
            padding-bottom:2.4rem;
            font-weight: bold;
        }
        .phone{
            margin-top: 0.8rem;
            font-size:0.7rem;
            color:#333333;
            line-height:0.6rem;
            font-weight: bold;
        }
        .shuru{
            width: 100%;
            height: 2.35rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .code{
            width: auto;
            height: 2.25rem;
            font-size:0.65rem;
            color:#B3B3B3;
            line-height:2.35rem;
        }
        input[type="text"], input[type="password"], input[type="tel"] {
            width: 9rem;
            height: 2.25rem;
            color: #010101;
            background: none;
            outline: none;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0 0 0 0;
            margin: 0 0 0 0;
        }

        input::-webkit-input-placeholder {
            color: #B3B3B3;
            font-size: 0.75rem;
            font-weight: normal;
        }
        .login-btn{
            margin-top: 2.25rem;
            width:100%;
            height:2.5rem;
            background:#E73C5C;
            border-radius:5px;
            font-size:0.8rem;
            color:#FFFFFF;
            line-height:2.5rem;
            text-align: center;
            font-weight: bold;
        }
        .zhuce{
            height: 0.65rem;
            font-size:0.7rem;
            color: #E73C5C;
            line-height:0.65rem;
            margin-top: 0.9rem;
            float: right;
        }
        .sanfang{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 3.55rem;
        }
        .tu img{
            width: 2.25rem;
            height: 2.25rem;
        }
        .xieyi{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 1.675rem;
        }
        .xiaobiao{
            width: 0.75rem;
            height: 0.75rem;
        }
        .tongyi{
            font-size: 0.65rem;
            color: #999999;
            font-size: 0.6rem;
        }
        .tongyi span{
            color: #E73C5C;
        }
        .new_pwd1 {
            height: 2.25rem;
            width: 40px;
            background: url('__IMG__kaiyan.png') no-repeat right;
            background-size: 20px 20px;
        }
        .new_pwd2 {
            height: 2.25rem;
            width: 40px;
            background: url('__IMG__closeEye.png') no-repeat right;
            background-size: 20px 20px;
        }
        .tishi{
            height:0.65rem;
            font-size:0.65rem;
            color:rgba(204,204,204,1);
            line-height:0.65rem;
            margin-top: 0.55rem;
        }
        .code{
            color:#E73C5C;
        }
        .code1{
            color:#B3B3B3;
            width: auto;
            height: 2.35rem;
            font-size:0.65rem;
            line-height:2.35rem;
            text-align: center;
        }
	</style>
</head>

<body>
<header class="aui-bar aui-bar-nav " style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
</header>
<div class="warrp">
    <div class="title">
        找回密码
    </div>
    <div class="phone">
        手机号
    </div>
    <div class="shuru underLine">
        <input type="tel" placeholder="请输入手机号" id="phone" name="phone" maxlength="11" onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu="value=value.replace(/[^0-9]/g,'')">
        <div class="code"   id='code' onclick="getcode()" tapmode="active">
            发送验证码
        </div>
    </div>
    <div class="phone">
        验证码
    </div>
    <div class="shuru underLine">
        <input type="tel" placeholder="请输入验证码" id='codeValue' maxlength="6" name="phonecode" />
    </div>
    <div class="phone">
        新密码
    </div>
    <div class="shuru underLine">
        <input type="password" placeholder="请输入新密码" id="user_pwd" minlength="6"  maxlength="16"  name="newpassword" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\.\-\_\,\>\@]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\.\-\_\,\>\@]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\.\-\_\,\>\@]/g,'')">
        <div class="new_pwd2" id="new_pwd" onclick="yanjing()" tapmode="active"></div>
    </div>
    <div class="tishi">
        密码为6-16位数字、字母和符号组成、不允许有空格
    </div>
    <div class="login-btn" onclick="toLoginnn()">
        确定
    </div>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript">
    apiready = function() {
        var header = $api.byId('header');
    };

    var onClickTime;//点击时间
    var onClickTime1;//当前时间
    var isOnclick = true;
//    var where='';//1从个人中心--账户管理--修改登录密码,空从登录页跳转
//    apiready = function() {
//        where=api.pageParam.where;
//		alert(where);
//    };

    //确定
    function toLoginnn () {

        //验证码登录
        var phone = $api.byId('phone').value;
        var code = $api.byId('codeValue').value;
        var pass = $api.byId('user_pwd').value;
        var regBox = {
            regMobile: /^\d{11}$/ //手机
        };
        var regBox1 = {
            regUpwd: /^[^ ]{6,16}$/ //密码6位英文或数字
        };
        var rPhone = regBox.regMobile.test(phone);
        var rPwd = regBox1.regUpwd.test(pass);
        if (!(rPhone && phone)) {
            layer.open({
                content: '请输入正确手机号'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return;

        } else if (code == '') {
            layer.open({
                content: '请输入验证码'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return;
        } else if (!rPwd) {
            layer.open({
                content: '请输入6到16位字母、数字或符号'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return;
        }
        var phone = $('#phone').val();
        var code = $('#codeValue').val();
        var pass = $('#user_pwd').val();
        $.ajax({
            url:'{:url("Login/ajaxGetPwd")}',
            data:{phonecode:code,phone:phone,newpass:pass,type:1},
            dataType:'JSON',
            type:'post',
            success:function (res) {
                if(res.status == 200){
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    location.href = '{:url("Login/account")}';
                }else{
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }


//    function need_ma () {
//        var phone = $api.byId('phone').value;
//        var regBox = {
//            regMobile: /^\d{11}$/ //手机
//        };
//        var rPhone = regBox.regMobile.test(phone);
//        if (!(rPhone && phone)) {
//
//            api.toast({
//                msg: '请输入正确手机号',
//                duration: 2000,
//                location: 'middle'
//            });
//
//            return;
//
//        }
//        if (isOnclick) {
//            //调用接口判断
//            sendSMS(phone);
//        }
//    }

//    //获取验证码
//    function sendSMS (phone) {
//        var parame = {
//            values: {
//
//                phone: phone,
//                type:''
//
//            }
//        };
//        LoadingShow();
//        doAjax(GETPHONECODE, 'POST', parame, function (successData) {
//            LoadingClose();
//            if (successData.status == '200') {
//
//                api.toast({
//                    msg: '发送成功',
//                    duration: 2000,
//                    location: 'middle'
//                });
//                if (isOnclick) {
//                    onClickTime=Math.floor((new Date().getTime())/1000);
//                    isinerval = setInterval('CountDown()', 1000);
//                    isOnclick = false;
//                }
//
//            } else {
//
//                api.toast({
//                    msg: successData.msg,
//                    duration: 2000,
//                    location: 'middle'
//                });
//
//            }
//
//        }, function (successData) {
//
//        });
//
//    }

    //获取验证码
    function getcode() {
        var phone = $('input[name="phone"]').val();
        $.ajax({
            url:'{:url("Login/getPhoneCode")}',
            data:{phone:phone,type:''},
            dataType:'JSON',
            type:'post',
            success:function (data) {
                if(data.status == 200){
                    layer.open({
                        content: '发送成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    //60S倒计时
                    if (isOnclick) {
                        onClickTime=Math.floor((new Date().getTime())/1000);
                        isinerval = setInterval('CountDown()', 1000);
                        isOnclick = false;
                    }
                }else{
                    layer.open({
                        content: data.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }

    //验证码60秒倒数
    function CountDown () {
        onClickTime1=60-(Math.floor((new Date().getTime())/1000)-onClickTime);
        var code = $api.byId('code');
        $api.removeCls(code, 'code');
        $api.addCls(code, 'code1');
        if (onClickTime1 < 1) {
            $api.html(code, '重新获取');
            clearInterval(isinerval);
            isOnclick = true;
            return;
        }
        $api.html(code, '倒计时' + onClickTime1 + 's');
    }

    // 显示隐藏密码
    function yanjing () {
        var new_pwd = $api.byId('new_pwd');
        var user_pwd = $api.byId('user_pwd');
        if ($api.hasCls(new_pwd, 'new_pwd2')) {
            $api.removeCls(new_pwd, 'new_pwd2');
            $api.addCls(new_pwd, 'new_pwd1');
            $api.attr(user_pwd, 'type', 'text');
        } else {
            $api.removeCls(new_pwd, 'new_pwd1');
            $api.addCls(new_pwd, 'new_pwd2');
            $api.attr(user_pwd, 'type', 'password');
        }
    }
</script>

</html>
